<template>  
  <el-menu default-active="2" 
    class="el-menu-vertical-demo"
    text-color="#fff"
    active-text-color="#20a0ff"
    @open="handleOpen" 
    @close="handleClose"
    :collapse="isCollapse"
    >  
    <router-link active-class="active" to="/Palm">
    <el-menu-item index="/Palm">  
      <i class="el-icon-thumb"  style="color: white; font-size: larger; margin-right: 30px;"></i> 
      <span slot="title" >手诊</span>  
    </el-menu-item> 
    </router-link> 

    <!-- <router-link active-class="active" to="/Tongue">
    <el-menu-item index="/Tongue">  
      <i class="el-icon-sunset"  style="color: white; font-size: larger; margin-right: 30px;"></i> 
      <span slot="title" >舌诊</span>  
    </el-menu-item> 
    </router-link>  -->

    <!-- <router-link active-class="active" to="/Eye">
    <el-menu-item index="/Eye">  
      <i class="el-icon-view"  style="color: white; font-size: larger; margin-right: 30px;"></i> 
      <span slot="title" >眼诊</span>  
    </el-menu-item>
    </router-link>  -->

    <!-- <router-link active-class="active" to="/CollectEye">
    <el-menu-item index="/ClollectEye">  
      <i class="el-icon-view"  style="color: white; font-size: larger; margin-right: 30px;"></i> 
      <span slot="title" >眼诊</span>  
    </el-menu-item>
    </router-link>  -->

    <router-link active-class="active" to="/result">
      <el-menu-item index="/result">  
      <i class="el-icon-tickets" style="color: white; font-size: larger; margin-right: 30px;"></i> 
      <span slot="title">诊断结果</span>  
    </el-menu-item> 
    </router-link>


    <!-- <router-link active-class="active" to="/report">
      <el-menu-item index="/report">  
      <i class="el-icon-s-management" style="color: white; font-size: larger; margin-right: 30px;"></i> 
      <span slot="title">诊断报告</span>  
    </el-menu-item> 
    </router-link> -->

    
    <!-- <router-link active-class="active" to="/record">
      <el-menu-item index="/record">  
      <i class="el-icon-s-management"></i> 
      <span slot="title">诊断记录</span>  
    </el-menu-item> 
    </router-link> -->

  </el-menu>  
</template>

<script>
export default {
  name: "CommonAside",
  data(){
    return{

    }
  },
  methods:{
    handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
  },
  computed:{
    isCollapse() {
      return this.$store.state.menuCollapsed;
    }
  }
}
</script>

<style scoped>
.el-menu {
  /* display: flex; */
  height: 90%;
  justify-content: space-between;
  align-items: center;
  background-color: #70a172; /* 深绿色背景 */
  padding: 0px 10px; /* 根据需要调整内外边距 */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1) inset, /* 内阴影效果 */
              0 8px 26px rgba(0, 0, 0, 0.4); /* 外阴影效果，增强立体感 */
  transform: translateY(-2px); /* 微微上移，模拟悬浮 */
  border-radius: 10px;
  margin: 20px;
  margin-top: 40px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
  min-height: 400px;
}


/* 修改菜单项的文字大小和粗细 */
.el-menu-item {
  height: 10%;
  margin-top: 10px;
  font-size: 2em; /* 文字大小，可以根据需要调整 */
  font-weight: bold; /* 加粗文字 */
  text-decoration: none; /* 去除下划线 */
}

/* 选中状态下的菜单项 */
.el-menu-item.is-active {
  background-color: #38683c; /* 选中时的背景颜色 */
  border-radius: 10px;
}



/* 链接默认样式 */
.router-link-active,
.router-link-exact-active {
  text-decoration: none; /* 去除下划线 */
  color: inherit; /* 继承父元素的颜色 */
}
</style>